<template>
	<view class="course">
		<view class="row" v-for="(item,index) in courseList" :key="index">
			<uv-text :text="item[0]" bold size="30px" margin="10px 0"></uv-text>
			<view class="list uv-flex-row">
				<view @click="clickItem(item2)" class="item" v-for="(item2,index2) in item[1]" :key="index2">
					<view class="complete" v-if="item2.complete && item2.complete.length>0"> 
					√ 
					<uv-rate :count="item2.complete[0].rating" :value="item2.complete[0].rating" v-if="item2.complete[0].rating"></uv-rate>
					</view>
					<view class="img">
					</view>
					<view class="title">{{item2.name}}</view>
					<view class="active" style="background: #fff;" v-if="isActiveAddress(item2)">
						<uv-icon name="empty-address" label="当前位置"></uv-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { computed, ref } from 'vue';
	import { getCourseLastActive } from '@/common/js/getData.js';
	import { courseCompleteList } from '@/common/api/list.js';
	import { onLoad } from '@dcloudio/uni-app';
	import { checkLocalCharacter } from '@/common/js/character.js';
	import useInit from '@/common/hooks/useInit.js';
	useInit('reloadCourseData', init);
	try {
		checkLocalCharacter();
		// 获取最后选中课程
		getCourseLastActive();
	} catch (e) {}
	const category = ref('Basic');
	const resultList = ref([]);
	onLoad((options) => {
		if (options.category) {
			category.value = options.category;
			init();
		}
	})
	// 课程列表
	const courseList = computed(() => {
		let categoryList = getApp().globalData.dzdata?.categoryList ? getApp().globalData.dzdata?.categoryList : [];
		categoryList = categoryList.filter(item => item.category == category.value);
		let courseList = categoryList[0]?.courseList;
		courseList = resultList.value.length ? resultList.value : courseList;
		return Array.from(group(courseList, 'courseGroupName'));
	})
	// 当前位置
	const isActiveAddress = computed((item) => {
		return item => {
			return getApp().globalData.dzdata?.lastActive?.courseId == item.courseId;
		}
	})
	async function init() {
		const characterId = getApp().globalData.dzcharacter?.character?.characterId;
		const { data } = await courseCompleteList({
			category: category.value,
			characterId
		});
		resultList.value = data;
	}

	function group(arr = [], name) {
		const grouped = arr.reduce((acc, item) => {
			// 使用Map的get方法来获取键对应的数组，如果不存在则创建一个新的数组
			const group = acc.get(item[name]) || [];
			group.push(item);
			// 将分组后的数组再次设置回Map对象中
			acc.set(item[name], group);
			return acc;
		}, new Map());
		return grouped;
	}

	function clickItem(item) {
		getApp().globalData.setdzdata('courseItem', item);
		getApp().globalData.setdzdata('lastActive', item);
		uni.$uv.route({
			url: `/pages/learning/learning`,
			params: {
				id: item.courseId
			}
		})
	}
</script>
<style scoped lang="scss">
	.course {
		padding: 30px;
	}
	.list {
		flex-wrap: wrap;
		.item {
			width: 160px;
			height: 160px;
			margin: 14px;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 10px;
			cursor: pointer;
			.complete {
				color: red;
			}
			.title {
				color: #fff;
			}
		}
	}
</style>